<template>
	<view>
      <view class="search-box">
        <mySearch bg-color="#00bbff" border-radius="16" @click="goSearch"></mySearch>
      </view>
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
        <swiper-item v-for="(item,index) in swiperList" :key="index">
          <navigator class="swiper-item" :url="'/subpkg/goods_details/goods_details?goods_id='+item.goods_id">
             <image :src="item.image_src" ></image>
          </navigator>
        </swiper-item>
      </swiper>
      
      <!--分类 -->
      <view class="nav-list">
        <view class="nav-item" @click="jumpUrl(item)" v-for="(item,index) in navList" :key="index">
          <image class="nav-img" :src="item.image_src" mode=""></image>
        </view>
      </view>
      
      <!-- 楼层 -->
      <view class="floor-list">
        <!-- 楼层 item 项 -->
        <view class="floor-item" v-for="(item, index) in floorList" :key="index">
          <!-- 楼层标题 -->
          <image :src="item.floor_title.image_src" class="floor-title"></image>
           <!-- 楼层图片区域 -->
          <view class="floor-img-box" >
            <!-- 左侧大图片的盒子 -->
            <view class="left-img-box">
              <navigator :url="item.product_list[0].navigator_url">
                <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
              </navigator>
            </view>
            <!-- 右侧 4 个小图片的盒子 -->
            <view class="right-img-box">
              <view class="right-img-item" v-for="(val, idx) in item.product_list" :key="idx" v-if="idx !== 0">
                <navigator :url="val.navigator_url">
                   <image :src="val.image_src" mode="widthFix" :style="{width: val.image_width + 'rpx'}"></image>
                </navigator>
              </view>
            </view>
          </view>
          
        </view>
      </view>
     
      
	</view>
</template>

<script>
  import badgemix from '../../mixins/tab-bar.js'
	export default {
    mixins:[badgemix],
		data() {
			return {
				// 定义轮播图列表
          swiperList:[],
          navList:[],
          floorList:[]
			}
		},
    onLoad() {
        this.getSwiperList()
        this.getNavList()
        this.getfloorList()
    },
		methods: {
        async getSwiperList() {
            let {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')
            if(res.meta.status !==200) return uni.$showToast()
            this.swiperList = res.message
        },
        async getNavList() {
            let {data:res} = await uni.$http.get('/api/public/v1/home/catitems')
            if(res.meta.status !==200) return uni.$showToast()
            console.log(res);
            this.navList = res.message
        },
        jumpUrl(val) {
          if(val.name==='分类'){
            uni.switchTab({
              url:'../cate/cate'
            })
          }
        },
        async getfloorList() {
          let {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
          if(res.meta.status !==200) return uni.$showToast()
        
          res.message.forEach(val=>{
            val.product_list.map(item=>{
              item.navigator_url=item.navigator_url.replace('/pages','/subpkg/goods_list')
              return item
            })
          })
          console.log(res);
          this.floorList = res.message
        },
        goSearch() {
          uni.navigateTo({
            url:'../../subpkg/search/search'
          })
        }
        
		}
	}
</script>

<style lang="scss">
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
.search-box {
  // 设置定位效果为“吸顶”
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}
</style>
